<template>
  <div class="heatmap">
    <c-heatmap
      :ht-data="hdata"
      :colors="['#30B256', '#E8D231', '#EA6E83']"
      :options="options"
    />
  </div>
</template>
<script>
// import * as d3 from 'd3'
import CHeatmap from "../components/CHeatmap/index.vue";
import { trendArea } from "../api/risk";
import dayjs from "dayjs";

export default {
  name: "HeatMap",
  mixins: [],
  components: { CHeatmap },
  props: {
    title: {
      type: String,
      default: "",
    },
    condition: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      hdata: [],
      options: {
        left: 28,
        nullValueColor: "#DADCE3",
        start: dayjs().format("YYYY-MM-DD"),
        end: dayjs().format("YYYY-MM-DD"),
      },
    };
  },
  computed: {},
  methods: {
    // rows(item) {
    //     return this.columns.map(({ key, width }) => {
    //         return {
    //             value: item[key],
    //             key: key,
    //             width,
    //         };
    //     });
    // },
  },
  mounted() {
    // d3.csv('heatmap_data.csv').then(data => {
    //     this.hdata = data
    // })
  },
  methods: {
    fetchData() {
      const { ruleId, country, from, date } = this.condition;
      this.loading = this.$loading({
        target: this.$el,
      });
      trendArea({
        origin_area: from?.code,
        destination_area: country?.code,
        date,
        ruleId,
      })
        .then((res) => {
          const { data } = res;
          const hdata = [];
          let start, end;
          for (let i = 0, len = data.length; i < len; i++) {
            const d = data[i];
            for (let j = 0, len_j = d.trend.length; j < len_j; j++) {
              const trend = d.trend[j];
              hdata.push({
                y_dim: d["originAreaName"] || d["originArea"] || d["area"],
                x_dim: trend["label"],
                value: trend["value"]["riskScore"],
                color: trend["value"]["riskLevelColor"],
              });

              if (
                trend["label"] &&
                trend["label"] != "" &&
                trend["label"] != "null"
              ) {
                start =
                  !start || dayjs(start) > dayjs(trend["label"])
                    ? trend["label"]
                    : start;
                end =
                  !end || dayjs(end) < dayjs(trend["label"])
                    ? trend["label"]
                    : end;
              }
            }
          }

          const diff = dayjs(end).diff(dayjs(start), "day");
          const spanDays = 90;
          if (diff > spanDays) {
            this.options = {
              ...this.options,
              start,
              end,
            };
          } else {
            this.options = {
              ...this.options,
              start: dayjs(start).subtract((spanDays - diff) / 2, "day"),
              end: dayjs(end).add((spanDays - diff) / 2, "day"),
            };
          }
          console.log(this.options);
          this.$nextTick(() => {
            this.hdata = hdata;
          });
        })
        .finally(() => {
          this.loading.close();
        });
    },
  },
  watch: {
    condition() {
      this.fetchData();
    },
  },
};
</script>
<style lang="scss" scoped>
.heatmap {
  width: 100%;
  min-height: 100px;
}
</style>
